
(function($){
	
	
	$.fn.listaDesplegable = function(options) {
		var settings = $.extend({}, $.fn.listaDesplegable.defaults, options);
		
		if(settings.modificar != null)
		{
			
			var lista =$(this).next().find("ul"); 
			var elemento = lista.find("[jid="+settings.modificar.jid+"]");
			var nuevo = settings.modificar;
			if( elemento.length == 1)
			{
				if(nuevo.nombre != null)
				{
					elemento.find("a").text(nuevo.nombre);
				}
			}
			return;
		}
		else if(settings.insertar != null)
		{//De momento esto solo se usa para el chat, que no es una lista deplegable normal
			var lista =$(this).next().find("ul"); 
			if(lista.find("[jid="+settings.insertar.jid+"]").length == 0)
			{
				var nuevoElemento = $('<li class="ui-menu-item  ui-corner-all" role="menuitem" jid="'+settings.insertar.jid+'"><a id="ui-active-menuitem" class="ui-corner-all" tabindex="-1" style="display:inline">'+settings.insertar.nombre+'</a></li>');
				if(settings.insertar.img != null)
				{
					nuevoElemento.prepend("<img style='display:inline' class='ui-state-default ui-corner-all' src='"+settings.insertar.img+"'>");
				}
				 nuevoElemento.hover(
						 function()
						 {
							 $(this).addClass("ui-state-hover");
						 },
						 function(){
							 $(this).removeClass("ui-state-hover");
						 }).click(function(){
							 try{
								 settings.insertar.callback();
							 }catch(e){/*Intentamos ejecutar la funcion, si hay*/}
							 
							 lista.slideUp();
						 })
				lista.append(nuevoElemento);
				 var anterior = lista.width();
				 lista.width(lista.width()+15);
				 lista.css("margin-left",-1*(lista.width())+anterior-40);
			}
			return;
		}else if(settings.eliminar != null)
		{
			if(settings.eliminar == -1)
				$(this).next().find("ul").find("li").first().remove();
			else
				$(this).next().find("ul").find("[jid="+settings.eliminar+"]").remove();
			return;
		}
		
		//Uso normal
		$(this).hide();
		var selectBox = $(this);
		var menu = $("<div>").css("display","inline");
		var boton = $("<button>");
		
		boton.button({
            icons: {
            primary: 'ui-icon-gear',
            secondary: 'ui-icon-triangle-1-s'
        	},
        	label:selectBox.find(":selected").text()
		});
		
		
		var lista =$('<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="menu" aria-activedescendant="ui-active-menuitem" style="z-index:3005; margin-left:'+settings.margenIzquierdo+'px">');
		$.each($(this).find("option"),function(i,elemento){
			 var nuevoElemento = $('<li class="ui-menu-item ui-widget-content ui-corner-all" role="menuitem" val="'+$(elemento).val()+'"><a id="ui-active-menuitem" class="ui-corner-all" tabindex="-1">'+$(elemento).text()+'</a></li>');
			 nuevoElemento.hover(
					 function()
					 {
						 $(this).addClass("ui-state-hover");
					 },
					 function(){
						 $(this).removeClass("ui-state-hover");
					 }).click(function(){
						 selectBox.find(":selected").val($(this).attr("val"));
						 boton.find(".ui-button-text").text($(this).text());
						 if($(elemento).attr("callback") != null)
							 eval("("+$(elemento).attr("callback")+")");

						 lista.slideUp();
					 })
			lista.append(nuevoElemento);
		});

		lista.hide();
		
		boton.click(function(){
			$(this).focus();
			 if(lista.is(":visible"))
				 lista.slideUp();
			 else
				 lista.slideDown();
		 });
		//Para que cuando se pinche fuera se quite la lista. En fx y chrome va diferente
		//boton.blur(function(){lista.hide()})
		menu.append(boton,lista);
		$(this).after(menu);
		
		
	};
    
	$.fn.listaDesplegable.defaults  = {
			insertar: null,
			modificar: null,
			elminar: null,
			margenIzquierdo: 0
			
	};
	
	
	
	
})(jQuery);
